<!--
 * @Descripttion:
 * @version:
 * @Author: tanghao1
 * @Date: 2021-01-21 15:39:19
 * @LastEditors: tanghao1
 * @LastEditTime: 2021-03-11 10:49:02
-->
<template>
  <div>
    <div v-show="!showAddson && !showAEditthree">
      <div class="nav-head">
        <el-row type="flex" class="row-bg" flex-direction="row-reverse">
          <el-col :span="24"><el-button type="primary" size="mini" @click="addnav">新增一级图册</el-button></el-col>
        </el-row>
      </div>
      <el-form
        ref="refAtlasForm"
        :model="formData"
        :rules="formRules"
        size="mini"
        label-width="0"
        :show-message="true"
      ><!-- 列表 -->
        <table-box
          :data="formData.list"
          :table-config="tableConfig"
          :off-set="-20"
          table-row-key="id"
          :table-tree-props="{children: 'next', hasChildren: 'hasChildren'}"
          lazy
        >
          <el-table-column
            prop="atlasName"
            label="图册名称"
            sortable
            min-width="300"
          />
          <el-table-column prop="picUrl" label="封面" min-width="200" align="center">
            <template slot-scope="scope">
              <el-image v-if="scope.row.picUrl" :src="scope.row.picUrl" class="basicpic" />
              <span v-slse />
            </template>
          </el-table-column>
          <el-table-column prop="state" label="是否显示" min-width="100" align="center">
            <template slot-scope="scope">
              {{ scope.row.state === 1?'是':'否' }}
            </template>
          </el-table-column>
          <el-table-column label="排序" min-width="300" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="setTop(scope.row)">置顶</el-button>
              <el-button type="text" size="mini" @click="setUp(scope.row)">上移</el-button>
              <el-button type="text" size="mini" @click="setDown(scope.row)">下移</el-button>
              <el-button type="text" size="mini" @click="setBottom(scope.row)">置底</el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="300" align="center">
            <template slot-scope="scope">
              <el-button v-if="scope.row.levelType === 'THIRD'" type="text" size="mini" @click="addnavThree(scope.row)">编辑</el-button>
              <el-button v-else type="text" size="mini" @click="addnav('edit', scope.row)">编辑</el-button>

              <!-- <el-button :disabled="scope.row.levelType === `THIRD`" type="text" size="mini" @click="addnavson(scope.row)">新增子图册</el-button> -->

              <el-button v-if="scope.row.levelType === `THIRD`" type="text" size="mini" @click="handleMove(scope.row)">移动</el-button>
              <el-button v-else type="text" size="mini" @click="addnavson(scope.row)">新增子图册</el-button>
              <el-button type="text" size="mini" @click="handleDel(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </table-box>
        <div class="pagination-container">
          <el-pagination
            :current-page.sync="currentPage"
            :page-sizes="pageSizes"
            :page-size="pagesize"
            layout="sizes, prev, pager, next, slot"
            :total="allTotal === 0 ? total : allTotal"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
            <span class="el-pagination__jump">前往
              <el-input-number
                v-model="jumpPage"
                :controls="false"
                :min="1"
                @blur="showEnter"
                @keyup.enter.native="showEnter"
              />页</span>
          </el-pagination>
          <div v-show="total <= pagesize" class="pagination-info">当前显示
            <span>{{ handlePageRange(pagesize, currentPage) }}</span>，共
            <span class="total"> {{ formData.list.length }} </span> 条记录
          </div>
          <div v-show="total > pagesize" class="pagination-info">当前显示
            <span>{{ handlePageRange(pagesize, currentPage) }}</span>，共
            <span :class="[allTotal === 0 && total !== 0 ? 'total next-page': 'total']" @click="newEnter"> {{ allTotal === 0 && total !== 0 ? total-1 +'+': allTotal }}  </span> 条记录
          </div>
        </div>
      </el-form>
    </div>
    <edit-form v-if="showEdit" ref="formDlg" :visible.sync="showEdit" :detail-data="detailData" @refreshTable="refreshTable" />
    <add-formson v-if="showAddson" ref="formAddson" :visible.sync="showAddson" :detail-data="detailDatason" :son-data="sonData" @refreshTableson="refreshTableson" />
    <edit-form-three v-if="showAEditthree" ref="formEditthree" :visible.sync="showAEditthree" :detail-data-three="detailDataThree" @refreshTablethree="refreshTablethree" />

    <Move
      v-if="showMove"
      :visible.sync="showMove"
      :tree-data="treeData"
      :detail-data="moveData"
      @success="handleMoveSuccess"
    />
  </div>
</template>

<script>
import EditForm from './EditForm'
import EditFormThree from './EditFormThree'
import AddFormson from './AddFormson'
import Move from './components/Move'
import { json2FormData } from '@/utils'
import { getAtlasTree } from '@/api/shopauxPlat/atlasManagement'
import {
  searchAtlas,
  setupAtlaspic,
  setdownAtlaspic,
  settopAtlaspic,
  setbottomAtlaspic,
  deleteAtlas } from '@/api/shopauxPlat/atlasManagement'
export default {
  name: 'NavConfig',
  components: { EditForm, AddFormson, EditFormThree, Move },
  props: {},
  data() {
    return {
      tableConfig: {
        interfacePath: null,
        hideFuncBar: true
      },
      formData: {
        list: [] // table列表初始化
      },
      jumpPage: 1, // 分页前往默认值
      pagesize: 10, // 每页的条数
      pageSizes: [10, 20, 30, 50, 100],
      currentPage: 1, // 默认开始页面
      addEditFlag: false, // 增行/编辑后的标识，true时只显示保存和取消
      showEdit: false,
      showAddson: false,
      showAEditthree: false,
      detailData: [],
      otherFilters: [],
      detailDataThree: [],
      sonData: [],
      tableData: [],
      showMove: false,
      treeData: [],
      moveData: ''
    }
  },
  computed: {},
  created() {
    this.initData()
  },
  methods: {
    // 新增/编辑
    addnav(type, data) {
      if (type === 'edit') {
        this.detailData = data
      } else {
        this.detailData = ''
      }
      this.showEdit = true
    },
    // 新增子图册
    addnavson(data) {
      this.sonData = data
      this.detailData = ''
      this.showAddson = true
    },
    //  编辑-第三级
    addnavThree(data) {
      this.detailDataThree = data
      this.showAEditthree = true
    },
    // 删除
    handleDel(data) {
      const id = data.id
      this.$confirm('确定删除该数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteAtlas(id).then(res => {
          if (res.success === 1) {
            this.$message.success('删除成功')
            this.initData()
          }
        })
      })
    },
    // 上移
    setUp(data) {
      const id = data.id
      setupAtlaspic(id).then(res => {
        if (res.success === 1) {
          this.$message.success('上移成功')
          this.initData()
        }
      })
    },
    // 下移
    setDown(data) {
      const id = data.id
      setdownAtlaspic(id).then(res => {
        if (res.success === 1) {
          this.$message.success('下移成功')
          this.initData()
        }
      })
    },
    // 置顶
    setTop(data) {
      const id = data.id
      settopAtlaspic(id).then(res => {
        if (res.success === 1) {
          this.$message.success('置顶成功')
          this.initData()
        }
      })
    },
    // 置底
    setBottom(data) {
      const id = data.id
      setbottomAtlaspic(id).then(res => {
        if (res.success === 1) {
          this.$message.success('置底成功')
          this.initData()
        }
      })
    },
    // 切换页显示条数
    handleSizeChange(size) {
      if (this.addEditFlag === true) {
        this.$message.warning('当前处于修改状态，请保存或取消后再跳页')
        return false
      }

      this.pagesize = size
      this.jumpToFirstPage()
      this.refreshTable()
    },
    // 当操作在非第一页时，跳回第一页
    jumpToFirstPage() {
      this.currentPage = 1 // 不在第一页搜索时，调回第一页显示
      this.jumpPage = 1
      this.allTotal = 0
      this.total = 0
    },
    // 分页，获取下一页数据
    handleCurrentChange(currentPage) {
      if (this.addEditFlag === true) {
        this.$message.warning('当前处于修改状态，请保存或取消后再跳页')
        return false
      }
      this.jumpPage = currentPage
      this.currentPage = currentPage
      this.refreshTable()
    },
    // 前往第几页
    showEnter(ev) {
      this.jumpPage = ev.srcElement.value
      this.getTotal(ev.srcElement.value)
    },
    // 获取数据总条数
    getTotal(val) {
      // if (this.allTotal !== 0) return
      if (this.addEditFlag === true) {
        this.$message.warning('当前处于修改状态，请保存或取消后再获取总页数')
        return false
      }
      const searchData = json2FormData({
        page: val,
        rows: this.pagesize,
        order: 'desc',
        sort: '',
        onlyCountFlag: false,
        filtersRaw: JSON.stringify(this.otherFilters)
      })
      searchAtlas(searchData).then(res => {
        if (res.success === 1) {
          this.allTotal = res.data.total
          this.currentPage = res.data.page
          this.jumpPage = res.data.page
          this.formData.list = res.data.records
        }
      })
    },
    // 计算当前数据范围 如:1-20
    handlePageRange(size, currentPage) {
      const start = size * (currentPage - 1) + 1
      const end = size * currentPage

      const pageRange = `${start}-${end}`
      return pageRange
    },
    // 获取总数据条数
    newEnter() {
      this.getTotal(this.currentPage)
    },
    refreshTable() {
      this.showEdit = false
      this.$nextTick(() => {
        this.initData()
      })
    },
    refreshTableson() {
      this.showAddson = false
      this.initData()
    },
    refreshTablethree() {
      this.showAEditthree = false
      this.initData()
    },
    initData() {
      const searchData = json2FormData({
        page: this.currentPage,
        rows: this.pagesize,
        order: 'desc',
        sort: '',
        onlyCountFlag: false,
        filtersRaw: JSON.stringify(this.otherFilters)
      })
      searchAtlas(searchData).then(res => {
        if (res.success === 1) {
          const { page, rows, total, records } = res.data
          const list = records
          this.total = total
          if (total <= page * rows) {
            this.allTotal = total
          }
          this.formData.list = list
          this.allTotal = res.data.total
          this.currentPage = page
          this.jumpPage = page
        }
      })
    },
    async handleMove(row) {
      this.moveData = row
      await getAtlasTree().then(res => {
        this.treeData = res.data
      })
      this.$nextTick(() => {
        this.showMove = true
      })
    },
    handleMoveSuccess() {
      this.showMove = false
      this.$nextTick(() => {
        this.initData()
      })
    }
  }
}

</script>
<style lang='scss' scoped>
.pagination-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 8px 0 !important;
    .el-pagination{
      padding: 2px 0;
    }
    .pagination-info {
      padding: 2px 0 !important;
      font-size: 12px !important;
      .total {
        color: #3DC094;
      }
    }
    .el-pagination__jump {
      display: inline-block;
      position: relative;
      top: -4px;
      line-height: 28px;
      margin: 0 20px;
      /deep/ .is-without-controls {
        margin: 0 4px;
        width: 50px !important;
        /deep/ input {
          height: 28px;
        }
      }
    }
}
 .nav-head{
   display: flex;
   flex-direction: row-reverse;
 }
 .basicpic{
   width: 100px;
   height: 100px;
   margin: 5px;
 }
</style>
